<template>
  <div class="container">
    <div class="controller"
         v-if="list_arr.length>0">
      <span class="title">按时间</span>
      <div class="btn"
           :class="{'active':sort==1}"
           @tap="toggle_sort(1)">正序</div>
      <div class="btn"
           :class="{'active':sort==2}"
           @tap="toggle_sort(2)">倒序</div>
    </div>
    <div class="content"
         v-if="list_arr.length>0">
      <scroll-view scroll-y
                   scroll-with-animation
                   style="height:100%">
        <ul class="list">
          <li class="list-item"
              v-for="(item, index) in list_arr"
              :key="index">
            <div class="section clearfix">
              <div class="section-item section-left">
                管家姓名：{{item.butler_name}}
              </div>
              <div class="section-item section-right">
                管家电话：<span class="num"
                      @tap.stop="make_phone(item.butler_phone)">{{item.butler_phone}}</span>
              </div>
            </div>
            <div class="section"
                 v-if="item.contract_id">
              <div class="section-item">
                协议编号：{{item.contract_id}}
                <span class="copy-btn"
                      @tap.stop="copy_num(item.contract_id)">
                  复制
                </span>
              </div>
            </div>
            <div class="section">
              <div class="section-item">
                提交时间：{{item.sign_time_str}}
              </div>
            </div>
            <div class="status"
                 :class="{'yellow':item.apply_status==0,'green':item.apply_status==1,'red':item.apply_status==2}">
              {{item.apply_status==0?'审核中':''}}
              {{item.apply_status==1?'审核通过':''}}
              {{item.apply_status==2?'审核失败':''}}
            </div>
            <div class="detail-btn"
                 @tap.stop="detail(item)">
              查 看
            </div>
          </li>
        </ul>
      </scroll-view>

    </div>
    <div class="empty"
         v-if="list_arr.length<=0">
      <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/noxieyi.png"
           v-if="base_url"
           mode="widthFix"
           alt=""
           class="img">
      <div class="msg">
        您还没有相关协议哦
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      sort: 2,
      list_arr: [],
      base_url: common.image_resource
    };
  },
  methods: {
    copy_num (data_str) {
      wx.setClipboardData({
        data: data_str, //需要设置的内容,
        success: res => {
          wx.showToast({
            title: '复制成功', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    make_phone (num) {
      wx.makePhoneCall({ phoneNumber: num + '' });
    },
    toggle_sort (sort) {
      this.sort = sort
      this.get_data()
    },
    get_data () {
      common.fly_post('/api/v4_2/mmeber/protocol', {
        sort: this.sort == 1 ? 'asc' : 'desc'
      }, result => {
        let res = result.data
        if (res.status_code == '0') {
          res.data.forEach(val => {
            val.sign_time_str = new Date(val.sign_time * 1000).Format("yyyy-MM-dd")
          });
          this.list_arr = res.data
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    // detail (item) {
    //   wx.downloadFile({
    //     // 示例 url，并非真实存在
    //     url: item.agreement_url,
    //     success: function (res) {
    //       const filePath = res.tempFilePath
    //       wx.showToast({
    //         title: '文档下载成功', //提示的内容,
    //         icon: 'none', //图标,
    //         duration: 1000, //延迟时间,
    //         mask: true, //显示透明蒙层，防止触摸穿透,
    //         success: res => {
    //           setTimeout(() => {
    //             wx.openDocument({
    //               filePath: filePath,
    //               fileType: 'pdf',
    //               success: function (res) {
    //                 console.log('打开文档成功')
    //                 wx.showToast({
    //                   title: '文档打开成功', //提示的内容,
    //                   icon: 'none', //图标,
    //                   duration: 1500, //延迟时间,
    //                   mask: true, //显示透明蒙层，防止触摸穿透,
    //                   success: res => { }
    //                 });
    //               },
    //               fail () {
    //                 wx.showToast({
    //                   title: '文档打开失败', //提示的内容,
    //                   icon: 'none', //图标,
    //                   duration: 1500, //延迟时间,
    //                   mask: true, //显示透明蒙层，防止触摸穿透,
    //                   success: res => { }
    //                 });
    //               }
    //             })
    //           }, 1000);
    //         }
    //       });
    //     },
    //     fail () {
    //       wx.showToast({
    //         title: '文档下载失败', //提示的内容,
    //         icon: 'none', //图标,
    //         duration: 1500, //延迟时间,
    //         mask: true, //显示透明蒙层，防止触摸穿透,
    //         success: res => { }
    //       });
    //     }
    //   })
    // }，
    detail (item) {
      wx.navigateTo({ url: '/pages/package_mine/protocal_detail/main?url=' + encodeURIComponent(item.agreement_url) });
    }
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "我的协议"
    });
  },
  onShow () {
    this.get_data()
  }

};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  .controller {
    width: 100%;
    height: 40px;
    padding-left: 15px;
    background: rgba(255, 255, 255, 1);
    .title {
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 40px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 38px;
    }
    .btn {
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 40px;
      margin-right: 30px;
      display: inline-block;
      vertical-align: middle;
      &.active {
        color: #f8657a;
      }
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
    .list {
      width: 100%;
      .list-item {
        background: rgba(255, 255, 255, 1);
        padding: 30px 15px 20px;
        margin-top: 16px;
        position: relative;
        .section {
          margin-top: 14px;
          .section-item {
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 20px;

            display: inline-block;
            vertical-align: middle;
            .num {
              color: #999999;
              display: inline-block;
              vertical-align: middle;
            }
            .copy-btn {
              font-size: 10px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(248, 101, 122, 1);
              line-height: 21px;
              display: inline-block;
              vertical-align: middle;
              margin-left: 8px;
              margin-top: -4px;
            }
            &.section-left {
              float: left;
            }
            &.section-right {
              float: right;
            }
          }
          &:first-of-type {
            margin-top: 0;
          }
        }
        .detail-btn {
          width: 78px;
          height: 30px;
          border-radius: 6px;
          border: 1px solid rgba(252, 124, 146, 1);
          font-size: 14px;
          font-family: "PingFangSC-Medium";
          font-weight: 500;
          color: rgba(252, 124, 146, 1);
          line-height: 30px;
          text-align: center;
          position: absolute;
          right: 15px;
          bottom: 10px;
        }
        .status {
          width: 60px;
          height: 25px;
          background: rgba(255, 182, 79, 1);
          border-radius: 0px 6px 6px 0px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 25px;
          text-align: center;
          position: absolute;
          left: 0;
          top: 0;
          transform: translateY(-50%);
          &.yellow {
            background: rgba(255, 182, 79, 1);
          }
          &.green {
            background: rgba(61, 194, 91, 1);
          }
          &.red {
            background: rgba(255, 91, 114, 1);
          }
        }
      }
    }
  }
  .empty {
    img {
      width: 129px;
      display: block;
      margin: 115px auto 0;
    }
    .msg {
      margin-top: 12px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(190, 190, 190, 1);
      line-height: 20px;
      text-align: center;
    }
  }
}
</style>

